<template>
  <div>
    <div>
      <div class="test">
        <el-form
          ref="forget"
          :model="forget"
          label-width="100px"
          :rules="rules"
          size="100px"
          :label-position="labelPosition"
        >
          <el-form-item label="请输入短信验证码(区分大小写)" prop="code">
            <span>您的手机号为：{{phone}} ,如若有误，请联系物业管理员！</span>
            <el-row :gutter="10">
              <el-col :span="18">
                <el-input v-model="forget.code" placeholder="请输入手机短信验证码" :clearable="true"></el-input>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" :disabled="!show" @click="getCode">
                  <span v-if="show">获取验证码</span>
                  <span v-if="!show">{{count+"秒后重新获取"}}</span>
                </el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer showbuttfor">
        <el-button @click="cancelchange">取 消</el-button>
        <el-button type="primary" @click="confirmchange('forget')">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      count: "",
      timer: null,
      labelPosition: "top",
      phone: "177******39",
      forgetid: "",
      forget: {
        code: ""
      },
      rules: {
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    //提交验证码
    confirmchange(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //前端表单验证

          this.axios
            .post("forget/checksms?code=" + this.forget.code)
            .then(res => {
              if ((res.data == "success-check")) {
                //步骤条前进
                sessionStorage.setItem(
                  "active",
                  parseInt(sessionStorage.getItem("active")) + 1
                );
                //跳转第二步
                this.$router.push({
                  path: "/forgetpw/resetpw",
                  query: { forgetid: this.forgetid }
                });
                //刷新
                window.location.reload();
              }else{
                this.$alert("验证码错误！注意0与O的区别！", {
                  confirmButtonText: "确定",
                  callback:action=>{
                      this.$refs[formName].resetFields();
                  }
                });
              }

              
              console.log(res.data == "success-check")
              console.log(res);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          //验证错误信息
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelchange() {
      this.$router.push({
        //传参用router，接参用route
        path: "/"
      });
    },
    //获取验证码。
    getCode() {
      const TIME_COUNT = 5; //调整倒计时
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }

      this.axios
        .post("forget/getsms?forgetid=" + this.forgetid)
        .then(res => {
          //后续错误处理！
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  created() {
    this.forgetid = this.$route.query.forgetid;

    this.axios
      .post("forget/getphone?forgetid=" + this.forgetid)
      .then(res => {
        this.phone = res.data;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  components: {}
};
</script>

<style>
.mainword {
  font-size: 20px;
  position: relative;
  left: -210px;
}
.test {
  position: relative;
  top: 50px;
  /* border: solid 1px #cf1111; */
}

.showbuttfor {
  text-align: center;
  position: relative;
  top: 100px;
  /* border: solid 1px #cf1111; */
}
</style>
